<template>
	<view class="btn" :style="{
		width,
		height,
		borderRadius: isRadius ? borderRadius : ''
	}" @click="trigger" :class="type">
		<slot>
			按钮
		</slot>
	</view>
</template>

<script>
	/**
	 * btn
	 * @description 这是一个带有节流、防抖、基本样式的按钮。
	 * @property {String} height 高度。
	 * @property {String} width 宽度。
	 * @property {Boolean} isRadius 是否有圆角(默认值: true)。
	 * @property {String} borderRadius 圆角(默认值: 44rpx)。
	 * @property {String} type 类型(默认值: common1), 需要自定义类型,请在组件样式内添加相应的class样式。
	 * @property {String} limit 是否使用节流或防抖(默认值: false), 可选值: ["debounce", "throttle"]。
	 * @example <btn>内容</btn>
	 */
	export default {
		name: "btn",
		props: {
			text: {
				default: ""
			},
			height: {
				default: "88rpx"
			},
			width: {
				default: "100%"
			},
			isRadius: {
				default: true
			},
			borderRadius: {
				default: '44rpx'
			},
			// 可选值为common1、common2、common3
			type: {
				default: "common1"
			},
			// 是否使用节流或防抖
			limit: {
				// 默认不适用
				default: ''
			}
		},
		data() {
			return {
				// 定时器
				timer: null,
				// 开始的时间
				prev: 0
			};
		},
		methods: {
			// 防抖
			debounce(fn, wait) {
				if (this.timer !== null) clearTimeout(this.timer);
				this.timer = setTimeout(fn, wait);
			},
			// 节流
			throttle(fn, wait) {
				var now = Date.now();
				if (now - this.prev >= wait) {
					this.prev = Date.now();
					fn();
				}
			},
			// 触发点击按钮事件
			trigger() {
				if (!this.limit) {
					this.$emit("click", {})
				} else {
					switch (this.limit) {
						case "debounce":
							this.debounce(() => this.$emit("click"), 2000);
							break;
						case "throttle":
							this.throttle(() => this.$emit("click"), 2000);
							break;
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.btn {
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;
		box-sizing: border-box;
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		&.common1 {
			background: #FEBF4E;
			color: #FFFFFF;
		}

		&.common2 {
			background: #FEBF4E;
			color: #3D3D3D;
		}
	}
</style>
